import React, { useState, useEffect } from 'react';
import styles from './index.module.css';

const TCMLoadingPage = () => {
  const [statusMessage, setStatusMessage] = useState("加载中...");
  
  // 中医相关加载状态提示
  const statusMessages = [
    "加载中...",
    "整理环境...",
    "等待您的到来...",
  ];
  
  // 更新加载状态文本
  useEffect(() => {
    let statusIndex = 0;
    const interval = setInterval(() => {
      statusIndex = (statusIndex + 1) % statusMessages.length;
      setStatusMessage(statusMessages[statusIndex]);
    }, 2000);
    
    return () => clearInterval(interval);
  }, []);
  
  return (
    <div className={styles.loaderContainer} id="loader">
      {/* 装饰元素 */}
      <div className={`${styles.herbDecoration} ${styles.herb1}`}></div>
      <div className={`${styles.herbDecoration} ${styles.herb2}`}></div>
      <div className={`${styles.herbDecoration} ${styles.herb3}`}></div>
      
      {/* 中医风格加载动画 */}
      <div className={styles.tcmIcon}>
        <div className={styles.meridian}></div>
        <div className={styles.meridian}></div>
        <div className={styles.meridian}></div>
        <div className={styles.acupuncture}></div>
        <div className={styles.loaderRing}></div>
        <div className={styles.loaderProgress}></div>
      </div>
      
      <div className={styles.clinicName}>本草轩理疗坊</div>
      <div className={styles.loaderStatus} id="loadStatus">{statusMessage}</div>
    </div>
  );
};

export default TCMLoadingPage;
    